<template>
  <view class="payment-page">
    <!-- 顶部导航 -->
    <view class="header">
      <uni-icons type="arrowleft" size="24" color="#fff" @click="goBack"></uni-icons>
      <text class="title">租车费用支付</text>
      <view style="width: 24px;"></view>
    </view>
    
    <!-- 倒计时 -->
    <view class="countdown">
      <text>剩余支付时间</text>
      <text class="time">{{countdown}}</text>
    </view>
    
    <!-- 主要内容 -->
    <view class="content">
		<view style="padding: 25rpx; margin-bottom: 400px;">
			<!-- 考试信息 -->
			<view class="card exam-info">
			  <view class="card-header">
			    <uni-icons type="info" size="18" color="#ff80ab"></uni-icons>
			    <text>考试信息</text>
			  </view>
			  <view class="card-body">
			    <view class="info-row">
			      <text class="label">考试科目：</text>
			      <text class="value">{{examInfo.subject}}</text>
			    </view>
			    <view class="info-row">
			      <text class="label">考试日期：</text>
			      <text class="value">{{examInfo.date}}</text>
			    </view>
			    <view class="info-row">
			      <text class="label">考试场次：</text>
			      <text class="value">{{examInfo.time}}</text>
			    </view>
			    <view class="info-row">
			      <text class="label">考试地点：</text>
			      <text class="value">{{examInfo.location}}</text>
			    </view>
			  </view>
			</view>
			
			<!-- 车辆选择 -->
			<!-- <view class="card car-selection">
			  <view class="card-header">
			    <uni-icons type="car" size="18" color="#ff80ab"></uni-icons>
			    <text>确认训练车辆</text>
			  </view>
			  <view class="card-body">
			    <view 
			      v-for="(car, index) in cars" 
			      :key="index"
			      :class="['car-item', selectedCar === index ? 'active' : '']"
			      @click="selectCar(index)"
			    >
			      <image :src="car.image" class="car-image"></image>
			      <view class="car-detail">
			        <text class="car-model">{{car.model}}</text>
			        <text class="car-number">{{car.number}}</text>
			        <text class="car-price">¥{{car.price}}/小时</text>
			        <text class="car-desc">{{car.desc}}</text>
			      </view>
			      <view class="radio">
			        <view v-if="selectedCar === index" class="radio-inner"></view>
			      </view>
			    </view>
			  </view>
			</view> -->
			
			<!-- 费用明细 -->
			<view class="card fee-detail">
			  <view class="card-header">
			    <uni-icons type="list" size="18" color="#ff80ab"></uni-icons>
			    <text>费用明细</text>
			  </view>
			  <view class="card-body">
			    <view class="fee-row">
			      <text class="label">租车费用：</text>
			      <text class="value">¥{{selectedCarObj.price}}</text>
			    </view>
			    <view class="fee-row">
			      <text class="label">训练时长：</text>
			      <view class="time-selector">
			        <text 
			          v-for="(hour, index) in hours" 
			          :key="index"
			          :class="['hour-item', selectedHour === index ? 'active' : '']"
			          @click="selectHour(index)"
			        >{{hour}}小时</text>
			      </view>
			    </view>
			    <view class="fee-row">
			      <text class="label">保险费用：</text>
			      <switch :checked="insurance" color="#ff80ab" @change="toggleInsurance" />
			      <text class="value">¥{{insurance ? '20' : '0'}}</text>
			    </view>
			    <view class="divider"></view>
			    <view class="fee-total">
			      <text class="label">应付总额：</text>
			      <text class="value">¥{{totalFee}}</text>
			    </view>
			  </view>
			</view>
			
			<!-- 支付方式 -->
			<view class="card payment-method">
			  <view class="card-header">
			    <uni-icons type="wallet" size="18" color="#ff80ab"></uni-icons>
			    <text>选择支付方式</text>
			  </view>
			  <view class="card-body">
			    <view 
			      v-for="(method, index) in paymentMethods" 
			      :key="index"
			      :class="['method-item', selectedMethod === index ? 'active' : '']"
			      @click="selectMethod(index)"
			    >
			      <image :src="method.icon" class="method-icon"></image>
			      <text class="method-name">{{method.name}}</text>
			      <view class="radio">
			        <view v-if="selectedMethod === index" class="radio-inner"></view>
			      </view>
			    </view>
			  </view>
			</view>
			
			<!-- 支付协议 -->
			<view class="agreement">
			  <checkbox-group @change="toggleAgree">
			    <label>
			      <checkbox :checked="agree" color="#ff80ab" />
			      <text>我已阅读并同意</text>
			    </label>
			  </checkbox-group>
			  <text class="agreement-link" @click="viewAgreement">《驾考租车服务协议》</text>
			</view>
		</view>
    </view>
    
    <!-- 底部支付栏 -->
    <view class="footer">
      <view class="price">
        <text class="label">合计：</text>
        <text class="value">¥{{totalFee}}</text>
      </view>
      <button class="pay-btn" :disabled="!agree" @click="confirmPayment">立即支付</button>
    </view>
    
    <!-- 支付密码弹窗 -->
    <uni-popup ref="passwordPopup" type="bottom" :mask-click="false">
      <view class="password-popup">
        <view class="popup-header">
          <text class="popup-title">请输入支付密码</text>
          <uni-icons type="close" size="24" @click="closePasswordPopup"></uni-icons>
        </view>
        <view class="password-input">
          <input 
            type="password" 
            v-model="password" 
            maxlength="6" 
            placeholder="请输入6位支付密码"
            class="real-input"
          >
          <view class="fake-input">
            <view 
              v-for="i in 6" 
              :key="i"
              class="dot"
            >{{password.length >= i ? '•' : ''}}</view>
          </view>
        </view>
        <view class="popup-footer">
          <text class="forget-password" @click="forgetPassword">忘记密码？</text>
          <button class="confirm-btn" @click="submitPayment">确认支付</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>

export default {
  data() {
    return {
      countdown: '15:00',
      timer: null,
      examInfo: {
        subject: '科目二',
        date: '2023年6月20日',
        time: '上午场 (08:00-12:00)',
        location: '广州市天河区驾考中心'
      },
      cars: [
        {
          id: 1,
          model: '大众捷达',
          number: '粤A·1234学',
          price: 120,
          desc: '手动挡，车况良好，适合科目二练习',
          image: 'https://pic1.zhimg.com/80/v2-6afa72220d29f045a4b1b9f8a2b9c1b9_720w.webp'
        },
        {
          id: 2,
          model: '丰田卡罗拉',
          number: '粤A·5678学',
          price: 150,
          desc: '自动挡，新车，适合科目三练习',
          image: 'https://pic1.zhimg.com/80/v2-3b4b6e7b8c1d1e0e8e0e8e0e8e0e8e0e_720w.webp'
        }
      ],
      selectedCar: 0,
      hours: [1, 2, 3],
      selectedHour: 0,
      insurance: true,
      paymentMethods: [
        {
          id: 1,
          name: '微信支付',
          icon: '/static/images/wechat-pay.png'
        },
        {
          id: 2,
          name: '支付宝',
          icon: '/static/images/alipay.png'
        },
        {
          id: 3,
          name: '校园卡支付',
          icon: '/static/images/campus-card.png'
        }
      ],
      selectedMethod: 0,
      agree: false,
      password: ''
    }
  },
  computed: {
    selectedCarObj() {
      return this.cars[this.selectedCar] || {}
    },
    totalFee() {
      const carFee = this.selectedCarObj.price * (this.selectedHour + 1)
      const insuranceFee = this.insurance ? 20 : 0
      return carFee + insuranceFee
    }
  },
  created() {
    this.startCountdown()
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    // 开始倒计时
    startCountdown() {
      let minutes = 15
      let seconds = 0
      
      this.timer = setInterval(() => {
        if (seconds === 0) {
          if (minutes === 0) {
            clearInterval(this.timer)
            uni.showToast({
              title: '支付超时，请重新预约',
              icon: 'none'
            })
            setTimeout(() => {
              uni.navigateBack()
            }, 1500)
            return
          }
          minutes--
          seconds = 59
        } else {
          seconds--
        }
        
        this.countdown = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
      }, 1000)
    },
    
    // 选择车辆
    selectCar(index) {
      this.selectedCar = index
    },
    
    // 选择时长
    selectHour(index) {
      this.selectedHour = index
    },
    
    // 切换保险
    toggleInsurance(e) {
      this.insurance = e.detail.value
    },
    
    // 选择支付方式
    selectMethod(index) {
      this.selectedMethod = index
    },
    
    // 切换协议同意状态
    toggleAgree(e) {
      this.agree = !!e.detail.value.length
    },
    
    // 查看协议
    viewAgreement() {
      uni.navigateTo({
        url: '/pages/agreement/drivingRent'
      })
    },
    
    // 返回
    goBack() {
      uni.navigateBack()
    },
    
    // 确认支付
    confirmPayment() {
      if (!this.agree) {
        uni.showToast({
          title: '请先阅读并同意协议',
          icon: 'none'
        })
        return
      }
      
      this.password = ''
      this.$refs.passwordPopup.open()
    },
    
    // 关闭密码弹窗
    closePasswordPopup() {
      this.$refs.passwordPopup.close()
    },
    
    // 忘记密码
    forgetPassword() {
      uni.navigateTo({
        url: '/pages/profile/resetPaymentPassword'
      })
    },
    
    // 提交支付
    submitPayment() {
      if (this.password.length !== 6) {
        uni.showToast({
          title: '请输入6位支付密码',
          icon: 'none'
        })
        return
      }
      
      // 模拟支付过程
      uni.showLoading({
        title: '支付中...',
        mask: true
      })
      
      // 实际项目中调用支付API
      // uni.request({
      //   url: '/api/payment/driving-rent',
      //   method: 'POST',
      //   data: {
      //     carId: this.selectedCarObj.id,
      //     hours: this.selectedHour + 1,
      //     insurance: this.insurance,
      //     paymentMethod: this.paymentMethods[this.selectedMethod].id,
      //     password: this.password
      //   },
      //   success: (res) => {
      //     uni.hideLoading()
      //     this.$refs.passwordPopup.close()
      //     uni.navigateTo({
      //       url: '/pages/driving/rentSuccess'
      //     })
      //   }
      // })
      
      // 模拟支付成功
      setTimeout(() => {
        uni.hideLoading()
        this.$refs.passwordPopup.close()
        uni.navigateTo({
          url: '/pages/driving/rentSuccess'
        })
      }, 1500)
    }
  }
}
</script>

<style lang="scss" scoped>
.payment-page {
  height: 1800rpx;
  display: flex;
  flex-direction: column;
  background-color: #f5f6fa;
  
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: linear-gradient(135deg, #ff80ab 0%, #ff4081 100%);
    color: #fff;
    
    .title {
      font-size: 18px;
      font-weight: bold;
    }
  }
  
  .countdown {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    background-color: #fff8e6;
    color: #fa8c16;
    font-size: 14px;
    
    .time {
      font-weight: bold;
      margin-left: 5px;
    }
  }
  
  .content {
    flex: 1;
  }
  
  .card {
    background-color: #fff;
    border-radius: 12px;
    margin-bottom: 15px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    
    .card-header {
      display: flex;
      align-items: center;
      padding: 15px;
      border-bottom: 1px solid #f0f0f0;
      font-size: 16px;
      font-weight: bold;
      color: #333;
      
      text {
        margin-left: 8px;
      }
    }
    
    .card-body {
      padding: 15px;
    }
  }
  
  .exam-info {
    .info-row {
      display: flex;
      margin-bottom: 10px;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .label {
        width: 80px;
        color: #666;
      }
      
      .value {
        flex: 1;
        color: #333;
      }
    }
  }
  
  .car-selection {
    .car-item {
      display: flex;
      padding: 12px;
      margin-bottom: 10px;
      border-radius: 8px;
      border: 1px solid #f0f0f0;
      position: relative;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      &.active {
        border-color: #ff80ab;
        background-color: #f9f0ff;
      }
      
      .car-image {
        width: 100px;
        height: 70px;
        border-radius: 6px;
        margin-right: 12px;
        object-fit: cover;
      }
      
      .car-detail {
        flex: 1;
        
        .car-model {
          display: block;
          font-size: 16px;
          font-weight: bold;
          color: #333;
          margin-bottom: 3px;
        }
        
        .car-number {
          display: block;
          font-size: 14px;
          color: #666;
          margin-bottom: 3px;
        }
        
        .car-price {
          display: block;
          font-size: 14px;
          color: #ff4d4f;
          margin-bottom: 3px;
        }
        
        .car-desc {
          display: block;
          font-size: 12px;
          color: #999;
        }
      }
      
      .radio {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        border: 1px solid #d9d9d9;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 10px;
        
        .radio-inner {
          width: 12px;
          height: 12px;
          border-radius: 50%;
          background-color: #ff80ab;
        }
      }
    }
  }
  
  .fee-detail {
    .fee-row {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
      
      .label {
        width: 100px;
        color: #666;
      }
      
      .value {
        flex: 1;
        text-align: right;
        color: #333;
        font-weight: bold;
      }
      
      .time-selector {
        flex: 1;
        display: flex;
        
        .hour-item {
          flex: 1;
          text-align: center;
          padding: 6px 0;
          border: 1px solid #d9d9d9;
          border-radius: 4px;
          margin-right: 10px;
          
          &:last-child {
            margin-right: 0;
          }
          
          &.active {
            border-color: #ff80ab;
            color: #ff80ab;
            background-color: #f9f0ff;
          }
        }
      }
      
      switch {
        transform: scale(0.8);
        margin-right: 10px;
      }
    }
    
    .divider {
      height: 1px;
      background-color: #f0f0f0;
      margin: 15px 0;
    }
    
    .fee-total {
      display: flex;
      align-items: center;
      
      .label {
        font-size: 16px;
        color: #333;
      }
      
      .value {
        font-size: 20px;
        color: #ff4d4f;
      }
    }
  }
  
  .payment-method {
    .method-item {
      display: flex;
      align-items: center;
      padding: 12px 0;
      border-bottom: 1px solid #f0f0f0;
      
      &:last-child {
        border-bottom: none;
      }
      
      .method-icon {
        width: 24px;
        height: 24px;
        margin-right: 12px;
      }
      
      .method-name {
        flex: 1;
        color: #333;
      }
      
      .radio {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        border: 1px solid #d9d9d9;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 10px;
        
        .radio-inner {
          width: 12px;
          height: 12px;
          border-radius: 50%;
          background-color: #ff80ab;
        }
      }
    }
  }
  
  .agreement {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #666;
    margin-top: 10px;
    
    checkbox {
      transform: scale(0.8);
    }
    
    .agreement-link {
      color: #ff80ab;
    }
  }
  
  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background-color: #fff;
    display: flex;
    align-items: center;
    padding: 0 15px;
    border-top: 1px solid #f0f0f0;
    
    .price {
      flex: 1;
      
      .label {
        font-size: 14px;
        color: #666;
      }
      
      .value {
        font-size: 20px;
        color: #ff4d4f;
        font-weight: bold;
      }
    }
    
    .pay-btn {
      width: 150px;
      height: 40px;
      line-height: 40px;
      background: linear-gradient(135deg, #ff80ab 0%, #ff4081 100%);
      color: #fff;
      border-radius: 20px;
      font-size: 16px;
      
      &[disabled] {
        opacity: 0.6;
      }
    }
  }
  
  .password-popup {
    background-color: #fff;
    padding-bottom: env(safe-area-inset-bottom);
    
    .popup-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px;
      border-bottom: 1px solid #f0f0f0;
      
      .popup-title {
        font-size: 16px;
        font-weight: bold;
      }
    }
    
    .password-input {
      padding: 20px;
      position: relative;
      
      .real-input {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        z-index: 1;
      }
      
      .fake-input {
        display: flex;
        height: 50px;
        border: 1px solid #d9d9d9;
        border-radius: 8px;
        
        .dot {
          flex: 1;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 24px;
          border-right: 1px solid #f0f0f0;
          
          &:last-child {
            border-right: none;
          }
        }
      }
    }
    
    .popup-footer {
      display: flex;
      padding: 15px;
      border-top: 1px solid #f0f0f0;
      
      .forget-password {
        flex: 1;
        color: #ff80ab;
        font-size: 14px;
      }
      
      .confirm-btn {
        width: 120px;
        height: 40px;
        line-height: 40px;
        background: linear-gradient(135deg, #ff80ab 0%, #ff4081 100%);
        color: #fff;
        border-radius: 20px;
        font-size: 16px;
      }
    }
  }
}
</style>